<template>
  <div>
    <keep-alive>
      <H class='h' @xs_menu_show='xs_menu_show'></H>
    </keep-alive>
    <keep-alive>
      <LeftMenu @click_collapse='click_collapse' :xs_is_show='xs_is_show'></LeftMenu>
    </keep-alive>
    <div class='mian' :class="[{'false_Collapse_mian':isCollapse},{'xs_false_Collapse_mian':xs_isCollapse},'mian']" id='mian'>
      <div class='title'>{{this.$route.meta.title}}</div>
      <div class='page'>
        <transition name="el-fade-in-linear">
          <router-view></router-view>
        </transition>
      </div>
      <div class='footer'>
          <span data-v-47662783="" style="font-size: 14px;">©</span>&nbsp;&nbsp;2017-2018&nbsp;新奥数能科技有限公司&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a data-v-47662783="" href="http://www.miitbeian.gov.cn" class="enfooter1-record">京ICP备18041593号</a>
      </div>
    </div>
  </div>
</template>
<script>
import H from '@/components/header/index'
import LeftMenu from '@/components/leftmenu/index'
export default {
  components: {
    H,
    LeftMenu
  },
  name: 'mian',
  props: {
  },
  data() {
    return {
      isCollapse: false,
      xs_isCollapse: false,
      xs_is_show: false,
    }
  },
  created() {
  },
  methods: {
    xs_menu_show(p) {
      this.xs_is_show = p
    },
    click_collapse(p) {
      this.isCollapse = p
    },
    w() {
      let w = document.documentElement.clientWidth || document.body.clientWidth;
      if (w < 768) {
        this.xs_isCollapse = true
      } else {
        this.isCollapse = false
        this.xs_isCollapse = false
      }
      if (w <= 1200) {
        this.isCollapse = true
      } else {
        this.isCollapse = false
        this.xs_isCollapse = false
      }

    }
  },
  mounted() {
    let w = document.documentElement.clientWidth || document.body.clientWidth;
    if (w < 768) {
      this.xs_isCollapse = true
    } else {
      this.isCollapse = false
      this.xs_isCollapse = false
    }
    if (w <= 1200) {
      this.isCollapse = true
    } else {
      this.isCollapse = false
      this.xs_isCollapse = false
    }
    window.addEventListener('resize', this.w)
  }
}
</script>
<style lang="scss">
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
</style>
